﻿@{
    ViewBag.Title = "Music";
}
@section HeaderContent{
    <script src="@Url.Content("~/Scripts/Global/SitePinning.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Global/Audio.js")" type="text/javascript"></script>
    <script type="text/javascript">
        var sitePinning = new SitePinning();
        if (sitePinning.IsSupport && sitePinning.IsSitePinningOpen) {
            var nextbtn = sitePinning.AddThumbBarButton("/images/lt.ico", "Next");
            var soundbtn = sitePinning.AddThumbBarButton("/images/soundOn.ico", "静音");
            var previousbtn = sitePinning.AddThumbBarButton("/images/rt.ico", "Previous");
            sitePinning.AddMSThumbnailClick(function (e) {
                var audioSound = document.getElementById("audioSound");
                switch (e.buttonID) {
                    case soundbtn:
                        if (audioSound.muted == true) {
                            var styleSoundoff = sitePinning.AddButtonStyle(soundbtn, "/images/soundOn.ico", "静音");
                            sitePinning.ShowButtonStyle(soundbtn, styleSoundoff);
                            audioSound.muted = false;
                        }
                        else {
                            var styleSoundon = sitePinning.AddButtonStyle(soundbtn, "/images/soundOff.ico", "取消静音");
                            sitePinning.ShowButtonStyle(soundbtn, styleSoundon);
                            audioSound.muted = true;
                        }
                        break;
                }
            });
            sitePinning.ShowThumbBarButton();
        }
    </script>
}
<div style=""></div>
<div class="app-bar fg-color-white">
    <p style="padding: 20px;">
        Content for app bar</p>
</div>
<div id="audioBlock">
</div>
<script type="text/javascript">
    var audio = new Audio({ id: "audioSound", controls: "controls", tagetElementId: "audioBlock", src: "/upload/music/1.mp3" });
    audio.init();
    audio.TagetElement.play();
</script>
